<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebMOOC餐厅</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 状态栏 -->
    <header class="Box-1">
        <div class="Date">
            <div class="weekend">
                <span>W</span>
                <span id="time_W">1</span>
            </div>
            <div class="day">
                <span>D</span>
                <span id="time_D">1</span>
            </div>
        </div>
        <div class="Money">
            <span class="income" id="income">500</span>
        </div>
    </header>

    <!-- 厨师与顾客 -->
    <main>
        <div class="cooker">
            <div class="circle1 must" name = "cooker">
                <div class="circle2">
                    <img src="Images/chef.png">
                </div>
            </div>
            <div class="addcooker addcooker1 circle1">
                <div class="addcooker circle2">
                    <div class="cross"></div>
                    <img src="Images/chef.png">
                </div>
            </div>
        </div>

        <div class="guest">
            <div class="circle1" name="seat"><div class="circle2"><img></div><div class="food" name="food"></div></div>
            <div class="circle1" name="seat"><div class="circle2"><img></div><div class="food" name="food"></div></div>
            <div class="circle1" name="seat"><div class="circle2"><img></div><div class="food" name="food"></div></div>
            <div class="circle1" name="seat"><div class="circle2"><img></div><div class="food" name="food"></div></div>
        </div>
    </main>

    <footer>
        <div class="waitting"></div>
    </footer>

    <!-- cover为遮罩层 -->
    <div class="cover">
        <!-- 开始界面 -->
        <div class="begin">
            <h1>WebMOOC餐厅开业了</h1>
            <p class="require">WebMOOC餐厅即将开业,请认真经营你的餐厅吧经营餐厅需要做好下面几件事情!加油!</p>
            <div class="function">
                <p>招聘厨师</p>
                <p>迎接客人</p>
                <p>烹饪美食</p>
            </div>
            <button id="button-1">开始经营吧</button>
        </div>

        <!-- 添加厨师 -->
        <div class="recruit">
            <h1>招募新厨师</h1>
            <p>招聘一名新厨师可以帮你更快地为顾客烹饪菜肴，增加餐厅收入。你最多可以拥有六名厨师。但每个厨师每周需要你支付工资 ¥ 100请问你确认新招聘一名厨师吗?</p>
            <div class="box">
            <button id="button-2">是的,确认招聘</button>
            <button id="button-3">先不了</button>
            </div>
        </div>

        <!-- 删除厨师 -->
        <div class="fire">
            <h1>解雇厨师</h1>
            <p>解雇当前闲置的厨师可以帮你节省成本。解雇时会按厨师本周已经工作的日子结算工资，并会赔偿一周工资作为解约金。解雇当前厨师结算工资及解约金需要付出 ¥140</p>
            <div class="box">
                <button id="button-4">是的,确认解雇</button>
                <button id="button-5">先不了</button>
            </div>
        </div>
        
        <!--菜单-->
        <div class="Menu" id="me">
            <div class="menu">
                <div class="cus_waiting customer" id="menu_avatar">
                    <img id="menu_pic" src="Images/customer1.png">
                </div>
                <h2 id="menu_title" class="title">Li正在点菜,已点0元的菜</h2>
                <div class="form">
                    <form id="menu_form">
                        <h3>凉菜（二选一，可不点）</h3>
                        <div class="menu_item">
                            <div><input type="checkbox" value="6" name="menu" /><span>凉拌SAN</span></div>
                            <div>···························<span>￥6</span></div>
                        </div>
                        <div class="menu_item">
                            <div><input type="checkbox" value="4" name="menu" /><span>冷切DOM</span></div>
                            <div>···························<span>￥4</span></div>
                        </div>
                        <h3>主菜（五选一，必点）</h3>
                        <div class="menu_item">
                            <div><input type="checkbox" value="12" name="menu" /><span>UL抄LI</span></div>
                            <div>···························<span>￥12</span></div>
                        </div>
                        <div class="menu_item">
                            <div><input type="checkbox" value="15" name="menu" /><span>红烧HEAD</span></div>
                            <div>···························<span>￥15</span></div>
                        </div>
                        <div class="menu_item">
                            <div><input type="checkbox" value="18" name="menu" /><span>酥炸Table</span></div>
                            <div>···························<span>￥18</span></div>
                        </div>
                        <div class="menu_item">
                            <div><input type="checkbox" value="16" name="menu" /><span>炙烤CSS</span></div>
                            <div>···························<span>￥16</span></div>
                        </div>
                        <div class="menu_item">
                            <div><input type="checkbox" value="12" name="menu" /><span>清蒸DIV</span></div>
                            <div>···························<span>￥12</span></div>
                        </div>
                        <h3>饮品（二选一，可不点）</h3>
                        <div class="menu_item">
                            <div><input type="checkbox" value="5" name="menu" /><span>鲜榨flex</span></div>
                            <div>···························<span>￥5</span></div>
                        </div>
                        <div class="menu_item">
                            <div><input type="checkbox" value="6" name="menu" /><span>小程序奶茶</span></div>
                            <div>···························<span>￥6</span></div>
                        </div>
                    </form>
                </div>
                <div class="bar">
                    <div class="order" id="order">点好了，快点上菜</div>
                    <div class="order" id="quit">不吃了</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>